<html>
<head>
    <meta charset="UTF-8">
    <title>queue</title>
    <script src="js/sockjs.min.js"></script>
    <script src="js/stomp.min.js"></script>
    <script src="/webjars/jquery/3.1.0/jquery.js"></script>
    <script type="text/javascript">
        var stompClient = null;
        function setConnected(connected){
            document.getElementById("connect").disabled = connected;
            document.getElementById("disconnect").disabled = !connected;
            $("#response").html();
        }
        function connect() {
            var socket = new SockJS("/queueServer");
            stompClient = Stomp.over(socket);
            stompClient.connect({}, function(frame) {
                setConnected(true);
                console.log('连接信息: ' + frame);
                $("#user").val(frame.headers["user-name"]);
                stompClient.subscribe('/user/'+frame.headers["user-name"]+'/getMessage', function(response){
                    var response1 = document.getElementById('response');
                    var p = document.createElement('p');
                    p.style.wordWrap = 'break-word';
                    p.appendChild(document.createTextNode(response.body));
                    response1.appendChild(p);
                });
            });
        }

        function disconnect() {
            if (stompClient != null) {
                stompClient.disconnect();
            }
            setConnected(false);
            console.log("Disconnected");
        }

        function sendName() {
            var name = document.getElementById('name').value;
            stompClient.send("/sendMessage", {}, JSON.stringify({ 'name': name}));
        }
    </script>
</head>
<body onload="disconnect()">
<div>
    <fieldset name="Q2838697670">
        <legend>一对一聊天式</legend>
        <div>
            <labal>用户</labal><input type="text" id="user" />
            <button id="connect" onclick="connect();">Connect</button>
            <button id="disconnect" disabled="disabled" onclick="disconnect();">Disconnect</button>
        </div>
        <div id="conversationDiv">
            <labal>名字</labal><input type="text" id="name" />
            <button id="sendName" onclick="sendName();">Send</button>
            <p id="response"></p>
        </div>
    </fieldset>
</div>

</body>
</html>